<template>
  <div>
    <div v-show="isDialog" class="animated sharebg sharebg-active"></div>
    <transition enter-active-class="fadeInUp" leave-active-class="fadeOutDown">
      <div v-show="isDialog" class="animated shangpin-dialog">
        <div class="row1">
          <div class="dlg-row1-cell0">
            <img
              @click="handleClosedClick"
              class="am-img-thumbnail"
              src="../../../assets/img/2016042704.png"
            >
          </div>
        </div>
        <div class="content-base dialog-content">
          <div class="content-base content-row1">
            <div class="dlg-content-row1-left" id="Preview" value="0">
              <img
                v-for="(item, index) of swiperImg.slice(0, 1)"
                :key="index"
                class="img-width-max"
                :src="item"
              >
            </div>
            <div class="dlg-content-row1-right">
              <div class="dlg-content-row1-right-top1">
                <span>{{goods.name}}</span>
              </div>
              <div class="dlg-content-row1-right-top2">
                <span>
                  ￥
                  <span id="now_price">{{goods.price}}</span>
                </span>
                <span class="sign_add" style="color: rgb(0, 0, 0); display: none;">+</span>
                <span class="need_score_span dlg-content-row1-right-top2-span" style="display: none;">
                  <span id="need_score">0</span>积分
                </span>
              </div>
            </div>
          </div>
          <div class="ov-class pros-box"></div>
          <div id="numDiv" class="content-base content-row4">
            <span class="dlg-content-row4-span">数量:&nbsp;&nbsp;</span>
            <div class="num_div">
              <div class="minus button buttonclick" @click="editcart('minus')">
                <span>-</span>
              </div>
              <div class="count_div">
                <input id="mount_count" type="text" v-model="priceNum">
              </div>
              <div class="add button buttonclick" @click="editcart('add')">
                <span>+</span>
              </div>
            </div>
            <!-- <div id="stock_div">
              库存:
              <span id="stock">{{totalNum}}</span>
            </div> -->
          </div>
          <div class="div-clear"></div>
          <div
            class="content-button"
            v-show="dialogShowName===1"
            ref="div_joinCar"
            style="display: none;"
          >
            <button @click="handleClickCart" type="button" class="am-btn am-btn-warning">加入购物车</button>
          </div>
          <div
            class="content-button"
            v-show="dialogShowName===2"
            ref="div_buyNow"
            style="display: none;"
          >
            <button @click="handleClickMall" type="button" class="am-btn am-btn-danger">立即购买</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'DetailDialog',
  data () {
    return {
      priceNum: '1',
      totalNum: '9999'
    }
  },
  props: {
    dialogShowName: Number,
    isDialog: Number,
    swiperImg: Array,
    goods: Object
  },
  methods: {
    editcart (flag) {
      if (flag === 'add') {
        this.priceNum++
      }
      if (flag === 'minus') {
        if (this.priceNum > 1) {
          this.priceNum--
        }
      }
    },
    handleClosedClick () {
      this.$emit('chenge', 0)
    },
    handleClickCart () {
      if (this.priceNum < 1) {
        alert('商品数量不能小于1')
        this.priceNum = 1
      }
      this.$emit('handleCart', this.priceNum)
    },
    handleClickMall () {
      if (this.priceNum < 1) {
        alert('商品数量不能小于1')
        this.priceNum = 1
      }
      this.$emit('handleMall', this.priceNum)
    }
  },
  watch: {
    priceNum () {
      if (this.priceNum < 0) {
        this.priceNum = 1
      }
      if (this.priceNum > this.totalNum) {
        this.priceNum = this.totalNum
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import 'animate.css'
.div-clear
  clear: both
.sharebg-active
  width: 100%
  height: 100%
  position: fixed
  top: 0
  left: 0
  display: block
  z-index: 1100
  background: rgba(0, 0, 0, 0.7)
  opacity: 1
.shangpin-dialog
  z-index: 4999
  display: block
  font-size: 14px
  border-radius: 0
  bottom: 0
  left: 0
  position: fixed
  text-align: center
  transition: transform 300ms
  width: 100%
  .row1
    width: 100%
    position: relative
    height: 20px
    line-height: 20px
    .dlg-row1-cell0
      position: absolute
      left: 0px
      right: 0px
      float: right
      margin-right: 30px
      height: 20px
      line-height: 20px
      text-align: right
      top: 0px
      z-index: 9999
      .am-img-thumbnail
        width: 40px
        height: 40px
        border: 0
        border-radius: 50%
        display: inline-block
        max-width: 100%
        padding: 2px
        line-height: 1.6
        background-color: #fff
.dialog-content
  background: white
  box-sizing: border-box
  .content-row1
    width: 100%
    padding: 5px 5px
    position: relative
    font-size: 0
    display: -webkit-box
    display: -webkit-flex
    display: flex
    box-sizing: border-box
    .dlg-content-row1-left
      flex: none
      width: 90px
      height: 90px
      overflow: hidden
      display: flex
      justify-content: center
      align-items: center
    .dlg-content-row1-right
      height: 60px
      display: inline-block
      width: 68%
      font-size: 14px
      vertical-align: middle
      margin-left: 5%
      margin-top: 12px
      flex: auto
      .dlg-content-row1-right-top1
        width: 100%
        height: 30px
        line-height: 30px
        text-align: left
        padding-left: 0px
        white-space: nowrap
        span
          color: #2a2a2a
          display: inline-block
          width: 100%
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
      .dlg-content-row1-right-top2
        width: 100%
        height: 30px
        line-height: 30px
        text-align: left
        padding-left: 0px
        white-space: nowrap
        color: #ec2935
  #numDiv
    clear: both
    width: 100%
    line-height: 30px
    height: 45px
    padding: 5px 5px
    box-sizing: border-box
    .dlg-content-row4-span
      float: left
      padding-left: 7px
    .num_div
      float: left
      height: 30px
      line-height: 30px
      margin-right: 10px
      .minus
        float: left
        width: 30px
        height: 30px
        line-height: 30px
        border: 1px solid #c4c4c4
      .count_div
        float: left
        width: 45px
        height: 30px
        line-height: 30px
        border-top: 1px solid #c4c4c4
        border-bottom: 1px solid #c4c4c4
        background: #e9e9e9
        #mount_count
          width: 100%
          height: 100%
          padding: 0
          margin: 0
          border: 0
          display: block
          text-align: center
      .add
        float: left
        width: 30px
        height: 30px
        line-height: 30px
        border: 1px solid #c4c4c4
    #stock_div
      float: right
      margin-right: 5px
  .am-btn
    color: #fff
    width: 100%
    font-size: 18px
    height: 55px
    display: inline-block
    margin-bottom: 0
    padding: 0.5em 1em
    font-weight: 400
    line-height: 1.2
    text-align: center
    white-space: nowrap
    background-image: none
    border: 1px solid transparent
    border-radius: 0
    cursor: pointer
    outline: 0
    user-select: none
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out
  .am-btn-danger
    background-color: #fcb839
    border-color: #fcb839
  .am-btn-warning
    background-color: #ec2935
    border-color: #ec2935
</style>
